<template>
	<view style="padding: 10rpx 28rpx 0 30rpx;">
		<view class="uni-flex uni-column">
			<!-- 头部热门话题 -->
			<view class="top">
				<view class="titles">热门话题</view>
				<view class="tag" v-if="topic.length!=0">
					<view v-for="(item,index) in topic3Name" :key="item" @click="searchHotTopic(item)">{{item}}</view>
					<view v-if="item.topic_name != null" v-for="(item,index) in topic" :key="index" @click="searchHotTopic(item.topic_name)">{{item.topic_name}}</view>
				</view>
				<view v-else></view>
			</view>
			<!-- 中间历史搜索 -->
			<view style="border-bottom: 2rpx solid #BEBEBE;margin-bottom: 56rpx;" v-if="sreachHistory.length!=0">
				<view class="uni-flex uni-column">
					<view class="titles">历史搜索</view>
					<view class="HisTits" v-for="(item,index) in sreachHistory" :key="index" @click="searchHistory(item)">{{item}}</view>
					<!-- <uni-list>
						<uni-list-item class="HisTits" v-for="item in sreachHistory" :key="item" :ellipsis="1" :title="item" />
					</uni-list> -->
				</view>
			</view>
			<!-- 下方抖主推荐 -->
			<view class="text" style="-webkit-flex: 1;flex: 1;">
				<view class="titles">抖主推荐</view>
				<view>
					<scroll-view class="scroll-view_H" :scroll-x="true" @scroll="scroll" scroll-left="0" :show-scrollbar="true">
						<view id="demo1" class="scroll-view-item_H uni-flex uni-column" v-for="(item,index) in topUser" :key="index">
							<view>
								<image :src="item.avatar!=null&&item.avatar!=''&&item.avatar!='undefined'?item.avatar:'../../static/images/login/logo.png'" @error="errorImg(item.avatar)" @click="perIndex(item)"></image>
							</view>
							<view class="topName">{{item.nicheng!=null&&item.nicheng!=''?item.nicheng:'游客'}}</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	export default {
		components:{
			uniList,
			uniListItem
		},
		data() {
			return {
				sreachText:null,	//搜索内容
				sreachHistory:[],	//搜索历史
				topic:[],			//热门话题
				topUser:[],			//抖主推荐
				topic3Name:['抖教','抖学','晒娃'],		//话题前三
				headImg:null,
				
			}
		},
		onLoad(option) {
			
		},
		onReady() {
			
		},
		onPullDownRefresh(){
			uni.stopPullDownRefresh()
		},
		/* 监听搜索框内容变化 */
		onNavigationBarSearchInputChanged(e) {
			console.log(e.text)
			this.sreachText = e.text
		
		},
		/* 右上搜索按钮 */
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: '/pages/album/home-sreached?searchName='+this.sreachText
			});
			/* 添加历史记录 */
			if(this.sreachText!=null){
				if(this.sreachHistory.length >= 5){
					for (var i = 0; i < this.sreachHistory.length; i++) {
						if(this.sreachHistory[i] == this.sreachText){
							this.sreachHistory.splice(i,1)
						}
					}
					this.sreachHistory.unshift(this.sreachText)
					this.sreachHistory.splice(4,1)
					uni.setStorageSync('sreachHistory',this.sreachHistory)
				}else{
					for (var i = 0; i < this.sreachHistory.length; i++) {
						if(this.sreachHistory[i] == this.sreachText){
							this.sreachHistory.splice(i,1)
						}
					}
					this.sreachHistory.unshift(this.sreachText)
					this.sreachHistory.splice(4,1)
					uni.setStorageSync('sreachHistory',this.sreachHistory)
				}
			}
		},
		/* 监听软键盘上的搜索,完成按钮 */
		onNavigationBarSearchInputConfirmed(){
			uni.navigateTo({
				url: '/pages/album/home-sreached?searchName='+this.sreachText
			});
			/* 添加历史记录 */
			if(this.sreachText!=null){
				if(this.sreachHistory.length >= 5){
					for (var i = 0; i < this.sreachHistory.length; i++) {
						if(this.sreachHistory[i] == this.sreachText){
							console.log(1);
							this.sreachHistory.splice(i,1)
						}
					}
					this.sreachHistory.unshift(this.sreachText)
					this.sreachHistory.splice(4,1)
					uni.setStorageSync('sreachHistory',this.sreachHistory)
				}else{
					for (var i = 0; i < this.sreachHistory.length; i++) {
						if(this.sreachHistory[i] == this.sreachText){
							console.log(3);
							this.sreachHistory.splice(i,1)
						}
					}
					this.sreachHistory.unshift(this.sreachText)
					this.sreachHistory.splice(4,1)
					uni.setStorageSync('sreachHistory',this.sreachHistory)
				}
			}
		},
		mounted() {
			this.history()
			this.topicList()
			this.topUserList()
		},
		methods: {
			scroll: function(e) {
				console.log(e)
			},
			/* 搜索记录 */
			history(){
				console.log('history',uni.getStorageSync('sreachHistory'));
				 if(uni.getStorageSync('sreachHistory')!=null){
				 	var arr = uni.getStorageSync('sreachHistory')
				 	for (var i = 0; i < arr.length; i++) {
				 		if(i>3){
				 			arr.splice(3,arr.length)
				 		}else{
				 			this.sreachHistory.push(arr[i])
				 		}
				 	}
				 	console.log('搜索记录',this.sreachHistory)
				 }
			},
			/* 热门话题 */
			topicList(){
				this.$api.apiPost('user/video.lists/HotTopic').then(res => {
					console.log('热门话题',res)
					const DATA = res.data
					console.log(DATA.data);
					if(DATA.code == 200){
						this.topic = DATA.data
					}
				})
			},
			/* 抖主推荐 */
			topUserList(){
				this.$api.apiPost('user/video.lists/HotBlogger').then(res => {
					const DATA = res.data
					console.log(DATA.data);
					if(DATA.code == 200){
						this.topUser = DATA.data
						console.log('抖主推荐',this.topUser)
					}
				})
			},
			/* 点击热门话题搜索 */
			searchHotTopic(topicName){
				this.sreachText = topicName
				uni.navigateTo({
					url: '/pages/album/home-sreached?searchName='+topicName
				});
			},
			/* 点击抖主进入个人主页 */
			perIndex(item){
				uni.navigateTo({
					url: '/pages/school/my-center?user_id='+item.user_id,
				});
			},
			/* 点击历史记录搜索 */
			searchHistory(historyName){
				console.log(historyName);
				uni.navigateTo({
					url: '/pages/album/home-sreached?searchName='+historyName
				});
			},
			/* 图片加载错误替换默认图 */
			errorImg(avatar){
				console.log(123);
				for (var i = 0; i < this.topUser.length; i++) {
					this.topUser[i].avatar = '../../static/images/login/logo.png'
				}
			}
		}
	}
</script>

<style scoped>
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
	.uni-flex .uni-column > uni-list{
		
	}
	.top{
		margin-bottom: 48rpx;
	}
	.bottom{
		
	}
	.sreach{
		margin-top: 80rpx;
	}
	.tag{
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid #BEBEBE;
	}
	.tag view{
		color: #333333;
		font-size: 24rpx;
		font-weight: bold;
		background-color: #FAFAFA;
		border: 1rpx solid #DCDFE6;
		border-radius: 30rpx;
		height: 52rpx;
		line-height: 52rpx;
		padding: 0 36rpx 0 36rpx;
		margin-bottom: 30rpx;
	}
	.uni-flex.uni-row > view{
		
	}
	.scroll-view-item_H {
		display: inline-block;
		width: 25%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
	}
	.rankTop{
		font-size: 28rpx;
		font-weight: bold;
		color: #F56C6C;
	}
	
	.titles{
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 30rpx;
	}
	
	.text .titles{
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 56rpx;
	}
	
	.HisTits{
		/* height: 40rpx;
		margin-bottom: 30rpx;
		text-align: left;
		font-size: 28rpx;
		font-weight: bold;
		color: #333333; */
		margin-bottom: 30rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		padding: 0;
	}
	
	/deep/ .uni-list-item__container{
		padding: 0rpx;
		margin-bottom: 30rpx;
	}
	
	#demo1 image{
		width: 128rpx;
		height: 128rpx;
		border-radius: 100rpx;
	}
	
	#demo1 .topName{
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		line-height: 40rpx;
		height: 40rpx;
	}
</style>
